<template>
  <div class="common-layout">
    <el-container>
      <!-- 左侧导航 -->
      <el-aside :width="isCollapse ? '64px' : '200px'" class="aside">
        <SliderNavs :isCollapse="isCollapse" />
      </el-aside>
      <el-container>
        <!-- 顶部导航 -->
        <el-header class="header">
          <TopNav :is-collapse="isCollapse" @toggle-collapse="toggleCollapse" />
        </el-header>
        <!-- 内容区域 -->
        <el-main class="main">
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import SliderNavs from '@/components/SliderNavs/index.vue';
import TopNav from '@/components/TopNav/index.vue';
import { useLoginStore } from '@/stores/loginStore';
import { useMenuStore } from '@/stores/menuStore';
import { useRouter } from 'vue-router';
import {manage} from '@/utils/dynamicRouter.js'
const isCollapse = ref(false);

const toggleCollapse = () => {
  isCollapse.value = !isCollapse.value;
};

const loginStore = useLoginStore();
const menuStore = useMenuStore();
const router = useRouter();

onMounted(() => {
  if (loginStore.permission) {
    menuStore.fetchMenus(loginStore.permission);

    // 判断当前用户权限
    if(loginStore.permission === 'admin') {
      router.addRoute('layout', manage)
    }
  }
});
</script>

<style scoped>
.common-layout, .el-container {
  height: 100%;
}

.aside {
  background-color: #304156;
  transition: width 0.3s;
}

.header {
  padding: 0;
  height: 60px;
}

.main {
  background-color: #f0f2f5;
  padding: 20px;
}
</style>